import { useEffect,useState } from "react";
import { useSelector,useDispatch } from "react-redux";
import {fetchList} from "@/store/toolkit/ListSlice.js"
import InfiniteScroll from 'react-infinite-scroll-component'; // 【1】、引入无限滚动，实现上拉加载数据

function ToolkitStore() {
    const list = useSelector(state=>state.shopList.list)
    const hasMore = useSelector(state=>state.shopList.hasMore)
    const currentPageCode = useSelector(state=>state.shopList.currentPageCode)
 
    const dis = useDispatch();
    console.log('list',list);
    useEffect(()=>{
        console.log('useEffect');
        dis(fetchList({ pageCode: currentPageCode, pageSize: 10 }))
    },[])
    const fetchMoreData = ()=>{
        console.log('fetchMoreData');
        window.setTimeout(() => {
         dis(fetchList({ pageCode: currentPageCode, pageSize: 10 }))


        },500)
    }
    return ( 
        <div>
            {/* {list.map(item=>(
                <div key={item.id}>{item.shopName}</div>
            ))} */}
            
    
          <InfiniteScroll
          	// 数据长度
            dataLength={list.length}
            next={fetchMoreData}
            height={150}
            // 是否还有可加载滴数据
            hasMore={hasMore}
            scrollThreshold="20px"
  
            // 加载提示信息
            loader={<h4 style={{ textAlign: "center", color: "#c72c31" }}>加载中...</h4>}
            // 加载结束提示信息
            endMessage={
              <p style={{ textAlign: "center", color: "#c72c31" }}>
                <b>没有更多了~</b>
              </p>
            }
          >
            {
              list.map((item,index)=>(
                <div key={index}>{item.shopName}</div>
            ))
            }
            
          </InfiniteScroll>
  
        </div>
     );
}

export default ToolkitStore;